//开发环境webpack配置
const {resolve} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode:"development",
    entry:"./src/js/index.js",
    output:{
        filename:"js/index.js",
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[
            //处理css 
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            // 处理less
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            // 处理html 
            {
                test:/\.html$/,
                use:["html-loader"]
            },
            //处理图片
            {
                test:/\.(jpg|png|gif)/,
                use:[{
                    loader:"url-loader",
                    options:{
                        name:"[hash:6].[ext]",
                        outputPath:"img",
                        limit:10*1024
                    }
                }]
            },
            //处理其他资源
            {
                exclude:/\.(jpg|png|gif|html|css|less|js)/,
                loader:"file-loader"
            }
        ]
    },
    // 开发环境
    devServer:{
        port:3000,
        open:true,
        contentBase:resolve(__dirname,"build"),
        // hot:true
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ]
}